<template>
  <el-container>
    <el-header class="auto"><goback :content="content"></goback></el-header>
    <el-main>
      <el-tabs type="border-card" v-model="tab" @tab-click="handleClick"  @tab-remove="removeTab">
        <el-tab-pane v-for="(v,i) in tablist" :key="i" :closable="v.isclose" :name="v.component">
          <span slot="label" :name="i">{{v.title}}</span>
          <component :is="component_now" @addTab="addTab"></component>
        </el-tab-pane>

      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import goback from "../common/goback";
import setAttend from "./setAttend";
import setCity from "./setCity";
import setCompany from "./setCompany";
import setCurrency from "./setCurrency";
import setDept from "./setDept";
import setJob from "./setJob";
import setConsumer from "./setConsumer";
import setLimit from "./setLimit";
import setProcess from "./setProcess";
import setUser from "./setUser";
import setWorkflow from "./setWorkflow";
import staff_edit from "../staff/staff_edit";
import addNewWork from './subTab/addNewWork'
import editWork from './subTab/editWork'
import setPositionMapping from "./setPositionMapping";
import setSupplier from "./setSupplier.vue";

import {mapActions,mapState} from 'vuex'

export default {
  name: "setting",
  data(){
    return {
      content:"用户设置",
      tablist:[
        {title:'用户设置',component:'setUser',isclose:false,type: 1,},
        {title:'职位管理',component:'setJob',isclose:false, type: 2,},
        {title:'流程设置',component:'setWorkflow',isclose:false, type: 3,},
        {title:'部门设置',component:'setDept',isclose:false,type: 4,},
        {title:'客户设置',component:'setConsumer',isclose:false,type: 5},
        {title:'城市设置',component:'setCity',isclose:false, type: 6},
        {title:'公司设置',component:'setCompany',isclose:false,type: 7,},
        {title:'考勤设置',component:'setAttend',isclose:false,type: 8},
        {title:'行政报销限额',component:'setLimit',isclose:false,type: 9},
        {title:'币种设置',component:'setCurrency',isclose:false,type: 10},
        {title:'职位关联',component:'setPositionMapping',isclose:false,type: 11},
        {title:'供应商设置',component:'setSupplier',isclose:false,type: 12},

      ],
      tab:'setUser',
      component_now:'setUser',
      parentTab: '',//父级tab
    }
  },
  methods:{
  ...mapActions("Setdata",[
    "getPositionAction",
    "getAllRoleAndUserAction",
    "getWorkListAction",
    "getJobListAction",
    "getCompanyListActions",
    "getDeptListAction",
    "getTicketListAction",
    "getCityListAction",
    "getLimitAction",
    "getPositionMappingListAction",
    "getSupplyAction",
    "getRateListAction",
  ]),

  ...mapActions("SetUser",["getAccountListActions"]),

    handleClick(targetTab){
      let index  = targetTab.index;
      let tab_now = this.tablist[parseInt(index)];
      this.tab = this.component_now = tab_now['component'];
      this.content = tab_now.title;
      let type = tab_now['type']
        switch(type){
            case 2:
                this.getJobListAction({title: '',status: '',page: 1,pagesize: 10})
             break;
            case 3:
                this.getWorkListAction({name: '',status: '',page: 1,pagesize: 10})
                break;
            case 4:
                this.getDeptListAction({name:'', key:'', state:'',page: 1, pageNum:5,id: ''})
                break;
            case 5:
                this.getTicketListAction({is_list: 1,page: 1,page_size: 10})
                break;
            case 6:
                this.getCityListAction({page: 1,page_size: 10})
                break;
            case 7:
                this.getCompanyListActions({short_name: '',name: '',status: '',page: 1,page_size: 10})
                break;
            case 9:
                this.getLimitAction();
                break;
          case 10:
            this.getRateListAction({page: 1,limit: 10});
            break;
            case 11:
                this.getPositionMappingListAction({page: 1,pagesize: 10});
                break;
                case 12:
                  this.getSupplyAction({page: 1,page_size: 10});
                //todo;
                break;
            default:
                this.getAccountListActions({username: '',state: '',account: '',page: 1,pageSize: 10})
        }

    },
    //添加tab菜单
    addTab(title,component,parentTab){

     // console.log(title,component,parentTab);return ;
      //判断当前组件是否存在
      let tabs = this.tablist
      let isSet = false
      tabs.forEach((item,index) => {
          if(item.component == component) isSet = true
      })

      if(!isSet){
          this.tablist.push({
          title: title,
          component: component,
          isclose:true,
        });
      }

      this.content = title;
      this.component_now = component;
      this.tab = component;
      this.parentTab = parentTab;

    },
    //删除tab
    removeTab(targetName){

      let tabs = this.tablist
      console.log('+++++++++++++++' + targetName)
      let activeName = this.content
      let index_tab = 0
      let index_del = 0
      let parent_tab = this.parentTab
        tabs.forEach((tab, index) => {
          if(parent_tab == tab.component) index_tab = index

          if(tab.component == targetName) index_del = index

        });
       let tab_now = tabs[index_tab]
      console.log('tab_now:'+JSON.stringify(tab_now))
       this.content = tab_now['title'];
       this.tab = this.component_now = tab_now['component'];
       this.tablist.splice(index_del,1)
      let obj = {index: index_tab}
      this.handleClick(obj)



    }

  },
  components:{
    goback,
    setAttend,
    setCity,
    setCompany,
    setCurrency,
    setDept,
    setJob,
    setConsumer,
    setLimit,
    setProcess,
    setUser,
    setWorkflow,
    addNewWork,
    staff_edit,
    editWork,
    setPositionMapping,
    setSupplier,
  },

mounted(){
    this.getPositionAction({type:'position'})
    this.getAllRoleAndUserAction()
    this.getAccountListActions({username: '',state: '',account: '',page: 1,pageSize: 10})
},

}
</script>

<style scoped>

</style>




